<template>
	<view id="shenye">
		<block v-if="shenyeIshow==1">
			<view class="no_info">
				<image src="/static/my/order_no.png" mode="widthFix"></image>
				<text>暂无活动</text>
			</view>
		</block>
		<block v-if="shenyeIshow==2">
			<view class="head">
				<scroll-view class="scroll_view" scroll-y="true">
					<view class="sy_box">
						<image class="chuan_img" src="../../static/sy/chuan.png" mode=""></image>
						<view class="location_box">
							<image class="location_icon" src="@/static/sy/location_icon.png" mode=""></image>
							<view class="location_txt ellipseHide">{{address}}</view>
							<image class="reposition_img" src="@/static/sy/reposition.png" mode=""
								@click="openLocation">
							</image>
						</view>
						<image class="change_a_batch" src="@/static/sy/huanyipi.png" mode="" @click="changeBatch">
							<image class="clock_in_process" @click="processPropView" src="@/static/sy/dakaliucheng.png" mode=""></image>
						</image>
						<view class="shop_box" :style="item.imgs" v-for="(item,index) in shopList" :key="index"
							@click="getShopDetail(item)">
							<view class="distance_num ellipseHide" :style="item.numAbsolute" v-if="item.distance!=''">
								{{item.distance}}km
							</view>
							<view class="distance_shop ellipseHide" :style="item.shopNameAbsolute">{{item.shortName}}
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
			<!-- 我的产值 -->
			<view class="output_value" @click="handleLogin">
				<view class="output_value_box">
					<image class="jinbi_icon" src="../../static/sy/jinbi_icon.png" mode=""></image>
					<view class="output_value_box_head">
						<view class="output_value_box_head_l" @click="jumpOutputValue">
							<text>我的产值</text>
							<image src="../../static/sy/wenhao.png" mode=""></image>
						</view>
						<view class="output_value_box_head_r" @click="jumpPuchCard">
							<text v-if="isToken">我的打卡订单</text>
                            <text v-if="!isToken">去登陆</text>
							<image src="../../static/sy/right_jump.png" mode=""></image>
						</view>
                
					</view>
					<view class="output_value_box_info">
						<view class="output_value_box_info_box">
							<text>总算力：</text>
							<text class="textNum">{{info.value ? info.value : 0}}</text>
						</view>
						<view class="line"></view>
						<view class="output_value_box_info_box">
							<text>产值系数：</text>
							<text class="textNum">{{info.outputValue ? info.outputValue : 0}}</text>
						</view>
					</view>
				</view>
			</view>
			<!-- <view class="main" v-if="false">
				<view class="background_fff"></view>
				<view class="push_card_box" @click="jumpPuchCard">消费打卡记录</view>
				<view class="main_output_value" @click="jumpOutputValue" v-if="isToken">
					<view class="output_value_top">
						<image class="money_icon" src="@/static/sy/money_icon.png" mode=""></image>
						<text>我的产值</text>
					</view>
					<view class="output_value_bottom">
						<view class="output_value_box">
							<text>{{info.value}}</text>
							<view class="output_value_box_b">
								<image class="suanli_img" src="@/static/sy/suanli.png" mode=""></image>
								<text>总算力</text>
							</view>
						</view>
						<view class="line"></view>
						<view class="output_value_box">
							<text>{{info.outputValue}}</text>
							<view class="output_value_box_b">
								<image class="suanli_img" src="@/static/sy/chanzhixishu.png" mode=""></image>
								<text>产值系数</text>
							</view>
						</view>
					</view>
				</view>
			</view> -->
			<!-- 消费打卡流程弹窗 -->
			<view class="process_prop" v-if="processPropShow" @click="processPropShow=false">
				<scroll-view class="scroll_view" scroll-y="true">
					<view class="process_prop_box">
						<view class="mining_process">
							<view class="mining_process_h">
								<image class="title_icon" src="@/static/sy/title_icon_two.png" mode=""></image>
								<image class="title_icon" src="@/static/sy/title_icon_one.png" mode=""></image>
								<text>消费打卡流程</text>
								<image class="title_icon" src="@/static/sy/title_icon_one.png" mode=""></image>
								<image class="title_icon" src="@/static/sy/title_icon_two.png" mode=""></image>
							</view>
							<view class="mining_process_nav">
								<view class="mining_process_nav_box">
									<image src="@/static/sy/txdp.png" mode=""></image>
									<text>挑选店铺</text>
								</view>
								<image class="arrow_icon" src="@/static/sy/arrow_icon.png" mode=""></image>
								<view class="mining_process_nav_box">
									<image src="@/static/sy/gmsp.png" mode=""></image>
									<text>购买商品</text>
								</view>
								<image class="arrow_icon" src="@/static/sy/arrow_icon.png" mode=""></image>
								<view class="mining_process_nav_box">
									<image src="@/static/sy/hxsy.png" mode=""></image>
									<text>核销/使用</text>
								</view>
								<image class="arrow_icon" src="@/static/sy/arrow_icon.png" mode=""></image>
								<view class="mining_process_nav_box">
									<image src="@/static/sy/hdjl.png" mode=""></image>
									<text>获得奖励</text>
								</view>
							</view>
							<view class="mining_process_title">如何提高消费打卡效益</view>
							<view class="mining_process_table">
								<image class="mining_process_table_img" src="@/static/sy/gmnfr.png" mode=""></image>
								<view class="mining_process_table_r">
									<view class="mining_process_table_r_title">购买NFR</view>
									<view class="mining_process_table_r_tip">购买附带算力值的NFR权益卡&勋章</view>
								</view>
							</view>
							<view class="mining_process_table">
								<image class="mining_process_table_img" src="@/static/sy/tssl.png" mode=""></image>
								<view class="mining_process_table_r">
									<view class="mining_process_table_r_title">提升算力</view>
									<view class="mining_process_table_r_tip">每张附带算力值的NFR都会累积您的算力</view>
								</view>
							</view>
							<view class="mining_process_table">
								<image class="mining_process_table_img" src="@/static/sy/slph.png" mode=""></image>
								<view class="mining_process_table_r">
									<view class="mining_process_table_r_title">算力排行</view>
									<view class="mining_process_table_r_tip">系统根据您的总算力进行算力排行</view>
								</view>
							</view>
							<view class="mining_process_table">
								<image class="mining_process_table_img" src="@/static/sy/czxs.png" mode=""></image>
								<view class="mining_process_table_r">
									<view class="mining_process_table_r_title">产值系数</view>
									<view class="mining_process_table_r_tip">系统会根据您的算力排行分配产值系数</view>
								</view>
							</view>
							<view class="mining_process_table">
								<image class="mining_process_table_img" src="@/static/sy/dksy.png" mode=""></image>
								<view class="mining_process_table_r">
									<view class="mining_process_table_r_title">打卡收益</view>
									<view class="mining_process_table_r_tip">商品金额*产值系数将为您的通分奖励，部分特殊商品将奖励您神椰CoCo</view>
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
			<!-- 点击店铺弹窗 -->
			<view class="prop_box" @touchmove.stop.prevent v-if="isShow">
				<view class="prop_box_content" :class="isShow?'prop_box_content_active':''">
					<view class="prop_box_content_h">
						<view class="prop_box_content_h_address" v-if="shopDetail.distance!=''">
							距您{{shopDetail.distance}}km
						</view>
						<view class="prop_box_shop_name ellipseHide"
							:class="shopDetail.distance==''?'prop_box_shop_name2':'prop_box_shop_name'">
							{{shopDetail.name}}
						</view>
						<!-- <view class="prop_box_shop_name2 ellipseHide" v-if="shopDetail.lat==''">{{shopDetail.name}}</view> -->
						<view class="prop_box_close" @click.stop="isShow=false">
							<image src="@/static/sy/close_icon.png" mode=""></image>
						</view>
					</view>
					<view class="prop_box_content_location" v-if="shopDetail.lat!=''">
						<image class="address_icon" src="@/static/sy/address_icon.png" mode=""></image>
						<view class="prop_box_content_location_r">
							<view class="location_detail">{{shopDetail.address}}</view>
							<view class="prop_time">{{shopDetail.startTime}} ~ {{shopDetail.endTime}}</view>
						</view>
					</view>
					<view class="available_items">可用商品({{listTotalShop}})</view>
					<view class="prop_list">
						<scroll-view class="scroll_view" scroll-y="true" @scrolltolower="scrolltolower">
							<view class="prop_list_box" v-for="(item,pIndex) in commodityList" :key="pIndex">
								<image class="prop_list_box_l" :src="item.activityImg" mode="aspectFill"></image>
								<view class="prop_list_box_r">
									<view class="prop_list_box_r_title ellipseHide_two">
										{{item.name}}
									</view>
									<view class="reward" v-if="item.awardType!=3">
										预计获得{{item.awardAmount}}<text v-if="item.awardType==2">通分</text><text
											v-if="item.awardType==1">神椰CoCo</text>奖励
									</view>
									<view class="prop_list_box_r_detail">
										<view class="prop_list_box_r_detail_price">
											<text style="font-size: 30rpx;font-weight: 400;">￥</text>
											<text>{{item.sellPrice}}</text>
											<text style="font-size: 24rpx;font-weight: 400;margin-left: 4rpx;"
												v-if="item.isMultiProduct">起</text>
										</view>
										<view class="prop_list_box_r_detail_button" @click="buyClick(item)">立即购买</view>
									</view>
								</view>
							</view>
							<view style="height: 200rpx;"></view>
						</scroll-view>
					</view>
				</view>
			</view>
		</block>
		<!-- 自定义tabBar -->
		<tabBar :pagePath="'/pages/sy/sy'" :num="1"></tabBar>
	</view>
</template>

<script>
	import {
		getMyOutputValue,
		activityShopList,
		activityShopDetail,
		activityShopActivityList,
		getOperationConfiguration
	} from '@/api/sy.js'
	import jweixin from '@/components/jweixin-module/jsdk'
	import wechat from '@/components/jweixin-module/wechat'
	// import cnodeModel from '@/api/api.js';
	// import wechat from '@/components/jweixin-module/wechatSY'
	var QQMapWX = require('@/components/jweixin-module/jssdk.js');
	var qqmapsdk;
	export default {
		data() {
			return {
				info: {}, //产值内容
				shopList: [], //店铺列表
				shopAbsoluteList: [ //定位店铺
					{
						imgs: 'background: url(/static/sy/shop_1.png) 100% center / 100% no-repeat;top:760rpx;left:0rpx',
						numAbsolute: 'top:54rpx;left:134rpx',
						shopNameAbsolute: 'bottom:40rpx;left:40rpx',
					},
					{
						imgs: 'background: url(/static/sy/shop_2.png) 100% center / 100% no-repeat;top:1044rpx;right:0rpx;width:382rpx;height:480rpx',
						numAbsolute: 'top:20rpx;left:190rpx',
						shopNameAbsolute: 'bottom:4rpx;left:116rpx',
					},
					{
						imgs: 'background: url(/static/sy/shop_3.png) 100% center / 100% no-repeat;top:1360rpx;left:0rpx;width:480rpx;height:480rpx',
						numAbsolute: 'top:24rpx;left:164rpx',
						shopNameAbsolute: 'bottom:2rpx;left:70rpx',
					},
					{
						imgs: 'background: url(/static/sy/shop_4.png) 100% center / 100% no-repeat;top:1720rpx;right:0rpx;width:332rpx;height:400rpx',
						numAbsolute: 'top:24rpx;left:148rpx',
						shopNameAbsolute: 'bottom:0rpx;left:70rpx',
					},
					{
						imgs: 'background: url(/static/sy/shop_5.png) 100% center / 100% no-repeat;top:1932rpx;left:0rpx;width:558rpx;height:480rpx',
						numAbsolute: 'top:24rpx;left:108rpx',
						shopNameAbsolute: 'bottom:2rpx;left:42rpx',
					},
					{
						imgs: 'background: url(/static/sy/shop_6.png) 100% center / 100% no-repeat;top:2300rpx;right:0rpx;width:354rpx;height:408rpx',
						numAbsolute: 'top:36rpx;left:164rpx',
						shopNameAbsolute: 'bottom:12rpx;left:92rpx',
					},
					{
						imgs: 'background: url(/static/sy/shop_7.png) 100% center / 100% no-repeat;top:2474rpx;left:0rpx;width:394rpx;height:460rpx',
						numAbsolute: 'top:26rpx;left:128rpx',
						shopNameAbsolute: 'bottom:0rpx;left:56rpx',
					},
					{
						imgs: 'background: url(/static/sy/shop_8.png) 100% center / 100% no-repeat;top:2724rpx;right:0rpx;width:428rpx;height:460rpx',
						numAbsolute: 'top:8rpx;left:188rpx',
						shopNameAbsolute: 'bottom:-10rpx;left:100rpx',
					},
					{
						imgs: 'background: url(/static/sy/shop_9.png) 100% center / 100% no-repeat;top:3040rpx;left:0rpx;width:338rpx;height:400rpx',
						numAbsolute: 'top:12rpx;left:88rpx',
						shopNameAbsolute: 'bottom:4rpx;left:76rpx',
					},
					{
						imgs: 'background: url(/static/sy/shop_10.png) 100% center / 100% no-repeat;top:3248rpx;right:0rpx;width:466rpx;height:400rpx',
						numAbsolute: 'top:12rpx;left:208rpx',
						shopNameAbsolute: 'bottom:0rpx;left:130rpx',
					},
				],
				isShow: false,
				latitude: '', //纬度
				longitude: '', //经度
				address: '', //地址
				listTotal: 0, //总数
				pageSize: 10, //每页记录数
				pageNum: 1, //当前页码
				shopDetail: {}, //店铺详情
				listTotalShop: 0, //总数(商品列表用)
				pageSizeShop: 5, //每页记录数(商品列表用)
				pageNumShop: 1, //当前页码(商品列表用)
				commodityList: [], //商品列表
				shopId: '', //店铺id
				isPT: true, //是否是平台
				isToken: '',
				shenyeIshow: '', //entranceValue = 2展示    entranceValue = 1不展示
				processPropShow: false,//消费打卡流程弹窗
			}
		},
		onLoad() {  
			let platform = uni.getSystemInfoSync().platform
			wechat.scanQRJssdk()
			if (platform == 'ios') {
				// console.log('我是iOS')
				// uni.showModal({
				// 	content:'ios'
				// })
				// this.wechatInfo()
				// wechat.scanQRJssdk()
				// this.share()
			} else if (platform == 'android') {
				// uni.showModal({
				// 	content:'安卓'
				// })
				// wechat.scanQRJssdk()
				// this.share()
			}
			// this.wechatInfo()
			// wechat.scanQRJssdk()
			// var url = this.domainName +'/pages/sy/sy'
			// wechat.scanQRJssdkUrl(url)
			// wechat.scanQRJssdkUrl('https://pay.frp.yedaoyun.com/pages/sy/sy')
			// uni.showModal({
			// 	content: url
			// })
			qqmapsdk = new QQMapWX({
				key: 'VXOBZ-MNYL4-UXRUV-XVTEP-IE2OS-NTBUW', //腾讯地图key
				vm: this
			});
			setTimeout(() => {
				this.getLocation()
			}, 500)
			this.isToken = (this.$queue.getData('token') != undefined && this.$queue.getData('token') != '') ? true : false
			console.log('isToken',this.isToken)
			// if (this.isToken) {
			// 	this.getInfo()
			// }
		},
		onShow() {
			// this.share()
			if (this.isToken) {
				this.getInfo()
			}
			this.getOperationConfiguration()
			this.getShopList()
		},
		methods: {
			share() {
				wechat.scanQRJssdk(wx => {
					let data = {
						title: "神椰 Magic CoCo",
						desc: "欢迎来到神椰 Magic CoCo，享受更优的数字权益", // 分享描述
						link: this.domainName + '/pages/index/index', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
						imgUrl: this.domainName + '/static/my/kyy.png', // 分享图标
						success: function(e) {
							// 设置成功
							console.log("设置成功", e);
						},
					}
					wx.updateAppMessageShareData(data)
					wx.updateTimelineShareData(data)
				})

			},
			processPropView(){ //消费打卡弹窗
				this.processPropShow = true
			},
			// async wechatInfo(callback){
			// 	var url = this.domainName +'/pages/sy/sy'
			// 	// let resData = await cnodeModel.getWxshare(url);	// 根据接口返回appId，timestamp等数据
			// 	if(resData.code==200){
			// 		console.log('这里++')
			// 		jweixin.config({
			// 			beta: true,
			// 			debug: false,  
			// 			appId: resData.data.appId, // 必填，公众号的唯一标识
			// 			timestamp: resData.data.timestamp, // 必填，生成签名的时间戳
			// 			nonceStr: resData.data.nonceStr, // 必填，生成签名的随机串
			// 			signature: resData.data.signature, // 必填，签名
			// 			jsApiList: ['wx-open-launch-weapp','checkJsApi','scanQRCode','getLocation',"updateAppMessageShareData","updateTimelineShareData","chooseWXPay","chooseImage", "previewImage"],
			// 			openTagList: ['wx-open-launch-weapp'] // 需要使用的开放标签列表
			// 		});
			// 		jweixin.ready(function () {
			// 			jweixin.checkJsApi({
			// 				jsApiList:['scanQRCode','getLocation',"updateAppMessageShareData","updateTimelineShareData"],
			// 				success:function(res){
			// 					// console.log('成功',res)
			// 				}
			// 			})
			// 			if (callback) {
			// 				callback(jweixin);
			// 			}
			// 		});
			// 	}
			// },
			async getOperationConfiguration() { //获取 积分运营配置
				const res = await getOperationConfiguration()
				// entranceValue = 2展示    entranceValue = 1不展示
				this.shenyeIshow = res.result.entranceValue
			},
			async getInfo() { //获取产值内容
				var res = await getMyOutputValue()
				this.info = res.result
			},
			jumpOutputValue() { //跳转我的产值
				uni.navigateTo({
					url: '/pages/sy/my-output-value/my-output-value'
				})
			},
			async getShopList() { //查询店铺列表
				console.log('店铺请求')
				uni.showLoading({
					title: '加载中'
				})
				let data = {
					lat: this.latitude,
					lnt: this.longitude,
					pageNum: this.pageNum,
					pageSize: this.pageSize
				}
				try {
					const res = await activityShopList(data)
					this.listTotal = res.result.total
					this.shopList = res.result.records
					this.shopList.forEach((item, index) => {
						item.imgs = this.shopAbsoluteList[index].imgs
						item.numAbsolute = this.shopAbsoluteList[index].numAbsolute
						item.shopNameAbsolute = this.shopAbsoluteList[index].shopNameAbsolute
					})
					console.log('请求成功')
					uni.hideLoading()
				} catch {
					uni.hideLoading()
				} finally {
					setTimeout(res => {
						uni.hideLoading()
					}, 4000)
				}
			},
			changeBatch() { //换一批
				if (this.pageNum >= Math.ceil(this.listTotal / this.pageSize)) {
					console.log('没有分页')
					this.pageNum = 1
					this.getShopList()
				} else {
					this.pageNum++
					this.getShopList()
				}
			},
			async getShopDetail(item) { //查询店铺详情
				uni.showLoading({
					title: '加载中'
				})
				this.shopId = item.id
				let data = {
					lat: this.latitude,
					lnt: this.longitude,
					id: item.id,
				}
				try {
					const res = await activityShopDetail(data)
					this.shopDetail = res.result
					if (res.result.lat != '') {
						this.isPT = true
					} else {
						this.isPT = false
					}
					this.pageNumShop = 1
					this.getCommodityList()
					this.isShow = true
					uni.hideLoading()

				} catch {
					uni.hideLoading()
				} finally {
					setTimeout(res => {
						uni.hideLoading()
					}, 4000)
				}
			},
			async getCommodityList() { //获取打卡活动列表
				console.log(this.pageNumShop)
				var _this = this
				// console.log(this.navList[this.headerIndex].status)
				let data = {
					pageSize: this.pageSizeShop,
					pageNum: this.pageNumShop,
					shopId: this.shopId
				}
				const res = await activityShopActivityList(data);
				this.listTotalShop = res.result.total
				if (this.pageNumShop > 1) {
					this.commodityList = this.commodityList.concat(res.result.records); //将数据拼接在一起
				} else {
					this.commodityList = res.result.records
				}
			},
			scrolltolower() { //打卡活动列表分页
				if (this.pageNumShop >= Math.ceil(this.listTotalShop / this.pageSizeShop)) {
					console.log('没有分页')
				} else {
					this.pageNumShop++; //每触底一次 page + 1;
					this.getCommodityList()
				}
			},
            //去登陆
            handleLogin(){
                if(!this.isToken){
                    uni.showToast({
                        title:'请先登录',
                        icon: 'none'
                    })
                    setTimeout(() => {
                    	uni.reLaunch({
                    		url: '/pages/login/login'
                    	})
                    }, 1000)
                }
               
            },
			buyClick(item) { //跳转商品详情
				let data = {
					lat: this.latitude, //纬度
					lnt: this.longitude, //	经度
					id: item.id, //活动id
					shopId: this.shopId, //店铺id
				}
				let info = JSON.stringify(data)
				if (this.isPT) { //跳转平台
					let platform = uni.getSystemInfoSync().platform
					if (platform == 'ios') {
						window.location.href = "/pages/pay/mine-details-one?info=" + info
					} else if (platform == 'android') {
						uni.navigateTo({
							url: '/pages/pay/mine-details-one?info=' + info
						})
					}
					// window.location.href = "/pages/pay/mine-details-one?info=" + info
				} else { //跳转第三方
					let platform = uni.getSystemInfoSync().platform
					if (platform == 'ios') {
						window.location.href = '/pages/pay/mine-details-two?id=' + item.id + '&shopId=' + this.shopId
					} else if (platform == 'android') {
						uni.navigateTo({
							url: '/pages/pay/mine-details-two?id=' + item.id + '&shopId=' + this.shopId
						})
					}
					// window.location.href = '/pages/pay/mine-details-two?id=' + item.id
				}
			},
			jumpPuchCard() { //跳转消费打卡记录
				let data = {
					lat: this.latitude, //纬度
					lnt: this.longitude, //	经度
				}
				let info = JSON.stringify(data)
				uni.navigateTo({
					url: 'my-coconut-mine/my-coconut-mine?info=' + info
				})
			},
			getLocation() {
				console.log(545)
				let that = this
				uni.showLoading({
					title: '获取定位中',
					mask: true
				})
				jweixin.getLocation({
					// uni.getLocation({
					type: 'gcj02', // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'
					success: function(res) {
						console.log('res+++++', res);
						that.latitude = res.latitude
						that.longitude = res.longitude
						uni.hideLoading()
						qqmapsdk.reverseGeocoder({
							location: {
								latitude: res.latitude,
								longitude: res.longitude,
							},
							success: function(res) {
								that.address = res.result.address
								// that.propShow = true
								console.log('地址：' + that.address + '、' + '定位区域编码：' + res.result
									.ad_info.adcode, res.result)
								that.getShopList()
							},
							fail(res) {
								console.log('失败++++', res)
								// this.getGovAreaList()
								that.getShopList()
								uni.showToast({
									icon: "none",
									title: '注意：需要获取您的定位授权,否则部分功能将无法使用',
									duration: 2000
								})
							}
						})
						// uni.showModal({
						// 	content: res
						// })
						// uni.chooseLocation({
						// 	latitude: res.latitude,
						// 	longitude: res.longitude,
						// 	success: function(el) {
						// 		_this.param.address = el.address
						// 	}
						// });
						uni.hideLoading()
					},
					cancel: function() {
						console.log('cancel++++++++++')
						// uni.showModal({
						// 	content:'cancel++++++++++' + that.address
						// })
						uni.hideLoading()
						that.getShopList()
					},
					fail: function(res) {
						console.log('fail+++++++++')
						// uni.showModal({
						// 	content:'fail++++++++++' + that.address
						// })
						uni.hideLoading()
						that.getShopList()
						uni.showToast({
							title: '定位失败，请重新定位',
							icon: 'none'
						})
						if (that.address == '') { //解决苹果手机获取wxjsdk要重新刷新才能获取定位问题
							// window.location.href =  "https://pay.frp.yedaoyun.com/pages/sy/sy"
						}
						// uni.showModal({
						// 	title: '提示',
						// 	content: '请检查是否开启GPS定位！',
						// 	showCancel: false,
						// 	success: function(res) {
						// 		if (res.confirm) {
						// 			// this.$router.go(0)
						// 		}
						// 	}
						// });

					},
				});
				setTimeout(res => {
					uni.hideLoading()
				}, 4000)
			},
			openLocation() { //重新定位
				let that = this
				console.log(that.latitude, that.longitude)
				uni.getLocation({
					type: 'gcj02', //返回可以用于uni.openLocation的经纬度
					success: function(res) {
						console.log(res)
						const latitude = that.latitude;
						const longitude = that.longitude;
						uni.chooseLocation({
							success: function(res) {
								console.log('位置名称：' + res.name);
								console.log('详细地址：' + res.address);
								console.log('纬度：' + res.latitude);
								console.log('经度：' + res.longitude);
								that.address = res.address
								that.latitude = res.latitude
								that.longitude = res.longitude
								that.pageNum = 1
								that.getShopList()
							}
						});
					}
				});
			},
		}
	}
</script>

<style>
	page {
		height: 100%;
	}

	#shenye {
		background-color: #FFFFFF;
		min-height: 100%;
	}

	view {
		box-sizing: border-box;
	}

	.head {
		width: 100%;
		/* height: 1000rpx; */
		height: 100vh;
	}

	.scroll_view {
		height: 100%;
	}

	.sy_box {
		width: 100%;
		height: 4062rpx;
		position: relative;
		background: url('/static/sy/sy_bj.png') no-repeat;
		background-size: 100% 100%;
	}

	.chuan_img {
		width: 170rpx;
		height: 136rpx;
		position: absolute;
		top: 800rpx;
		right: 400rpx;
		z-index: 1;
		/* animation: forwardActive 10s forwards ease-in-out; */
		animation: forwardActive 100s forwards infinite normal;
	}

	@keyframes forwardActive {
		0% {
			top: 800rpx;
			right: 400rpx;
		}

		50% {
			top: 970rpx;
			right: 80rpx;
		}

		100% {
			top: 800rpx;
			right: 400rpx;
		}
	}

	.location_box {
		width: 712rpx;
		height: 80rpx;
		display: flex;
		align-items: center;
		padding: 0 20rpx;
		background: #FFFFFF;
		border-radius: 12rpx;
		position: absolute;
		top: 18rpx;
		left: 20rpx;
	}

	.shop_box {
		width: 422rpx;
		height: 502rpx;
		/* background: url('/static/sy/shop_1.png') no-repeat; */
		background-size: 100% 100%;
		position: absolute;
		/* top: 100rpx;
		left: 0rpx; */
		display: flex;
		flex-direction: column;
		align-items: center;
		z-index: 2;
	}

	.distance_num {
		background: url('/static/sy/distance_tips.png') no-repeat;
		background-size: 100% 100%;
		width: 98rpx;
		height: 45rpx;
		font-size: 22rpx;
		color: #FB302E;
		position: absolute;
		/* top: 54rpx;
		left: 134rpx; */
		text-align: center;
		line-height: 30rpx;
	}

	.distance_shop {
		width: 244rpx;
		height: 48rpx;
		padding: 0 10rpx;
		border-radius: 100rpx;
		background: #D3F0FF;
		border: 2rpx solid #FFFFFF;
		box-shadow: 0rpx 4rpx 0rpx #007ABC;
		text-align: center;
		line-height: 44rpx;
		color: #0C435F;
		font-size: 28rpx;
		position: absolute;
		/* bottom: 40rpx;
		left: 40rpx; */
	}

	.location_icon {
		width: 36rpx;
		height: 36rpx;
		margin-right: 12rpx;
	}

	.location_txt {
		font-size: 30rpx;
		color: #222222;
		width: 490rpx;
	}

	.reposition_img {
		width: 134rpx;
		height: 52rpx;
	}

	.change_a_batch {
		width: 126rpx;
		height: 44rpx;
		position: absolute;
		top: 126rpx;
		right: 0rpx;
	}

	.clock_in_process {
		width: 180rpx;
		height: 168rpx;
		position: fixed;
		z-index: 9;
		top: 676rpx;
		right: 30rpx;
	}

	/deep/ .scroll_view ::-webkit-scrollbar {
		display: none;
	}
	.output_value{
		position: fixed;
		width: 94%;
		height: 174rpx;
		background: #F3FDFF;
		box-shadow: 0rpx 0rpx 52rpx #1C8EBD;
		border-radius: 24rpx;
		bottom: 200rpx;
		z-index: 5;
		margin: 0 3%;
	}
	.output_value_box{
		position: relative;
		width: 100%;
		height: 100%;
	}
	.jinbi_icon{
		width: 106rpx;
		height: 78rpx;
		position: absolute;
		top: -18rpx;
		left: -8rpx;
	}
	.output_value_box_head{
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 14rpx 14rpx 0 112rpx;
	}
	.output_value_box_head_l{
		display: flex;
		align-items: center;
		font-size: 32rpx;
		color: #FA6810;
		font-weight: bold;
	}
	.output_value_box_head_l image{
		width: 32rpx;
		height: 32rpx;
		margin-left: 10rpx;
	}
	.output_value_box_head_r{
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 26rpx;
		color: #FFFFFF;
        padding: 0 24rpx;
		height: 50rpx;
		border-radius: 100rpx;
		background: linear-gradient(180deg, #EABE47 0%, #F97733 100%);
	}
	.output_value_box_head_r image{
		width: 26rpx;
		height: 26rpx;
		margin-left: 6rpx;
		margin-top: 4rpx;
	}
	.output_value_box_info{
		display: flex;
		align-items: center;
		width: 100%;
		margin-top: 22rpx;
	}
	.output_value_box_info_box{
		width: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 30rpx;
		color: #222222;
	}
	.output_value_box_info_box .textNum{
		font-size: 48rpx;
		font-weight: bold;
	}
	.output_value_box_info .line{
		width: 2rpx;
		height: 48rpx;
		background-color: #C5CFD1;
	}
	
	/* 消费打卡流程弹窗star */
	.process_prop {
		width: 100%;
		height: 100%;
		position: fixed;
		z-index: 20;
		top: 0;
		background-color: rgba(0, 0, 0, 0.7);
	}

	.process_prop_box {
		height: 1400rpx;
	}

	.mining_process {
		background: #FFFFFF;
		border-radius: 24rpx;
		padding: 30rpx 30rpx 30rpx;
		margin: 60rpx 30rpx 0rpx;
	}

	.mining_process_h {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.mining_process_h text {
		margin: 0 24rpx;
		font-size: 34rpx;
		color: #222222;
	}

	.title_icon {
		width: 15rpx;
		height: 19rpx;
	}

	.mining_process_nav {
		display: flex;
		justify-content: space-between;
		margin-top: 52rpx;
	}

	.mining_process_nav_box {
		display: flex;
		flex-direction: column;
		align-items: center;
		font-size: 26rpx;
		color: #222222;
	}

	.mining_process_nav_box image {
		width: 72rpx;
		height: 72rpx;
		margin-bottom: 14rpx;
	}

	.arrow_icon {
		width: 26rpx;
		height: 22rpx;
		margin-top: 26rpx;
	}

	.mining_process_title {
		font-size: 30rpx;
		color: #222222;
		margin: 60rpx 0 30rpx;
	}

	.mining_process_table {
		background-color: #EAF8FF;
		display: flex;
		align-items: center;
		border-radius: 8rpx;
		padding: 12rpx;
		margin-bottom: 32rpx;
	}

	.mining_process_table_img {
		width: 80rpx;
		height: 90rpx;
		margin-right: 18rpx;
	}

	.mining_process_table_r {
		flex: 1;
	}

	.mining_process_table_r_title {
		font-size: 30rpx;
		color: #222222;
		margin-bottom: 4rpx;
	}

	.mining_process_table_r_tip {
		font-size: 26rpx;
		color: #6F8D9F;
	}

	/* end */

	.prop_box {
		background-color: rgba(0, 0, 0, 0.6);
		width: 100%;
		height: 100%;
		position: fixed;
		z-index: 9;
		top: 0;
	}

	.prop_box_content {
		background-color: #FFFFFF;
		width: 100%;
		min-height: 844rpx;
		/* max-height: 1060rpx; */
		border-radius: 32rpx 32rpx 0 0;
		position: fixed;
		bottom: 0;
		z-index: 10;
	}

	.prop_box_content_active {
		animation: domainactive 0.5s forwards ease-in-out;
	}

	@keyframes domainactive {
		0% {
			bottom: -999rpx;
		}

		100% {
			bottom: 0;
		}
	}

	.prop_box_content_h {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 44rpx 34rpx 40rpx;
		border-bottom: 2rpx solid #D9D9D9;
		margin: 0 20rpx;
	}

	.prop_box_content_h_address {
		height: 40rpx;
		padding: 0 10rpx;
		text-align: center;
		line-height: 36rpx;
		border: 2rpx solid #2720DE;
		font-size: 24rpx;
		color: #2720DE;
		border-radius: 4rpx;
	}

	.prop_box_shop_name {
		width: 390rpx;
		font-size: 34rpx;
		color: #444444;
		margin: 0 10rpx 0 14rpx;
		text-align: center;
		font-weight: bold;
	}

	.prop_box_shop_name2 {
		width: 950rpx;
		font-size: 32rpx;
		color: #444444;
		margin: 0 10rpx 0 14rpx;
		text-align: center;
	}

	.prop_box_close {
		width: 40rpx;
		height: 40rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.prop_box_close image {
		width: 26rpx;
		height: 26rpx;
	}

	.prop_box_content_location {
		display: flex;
		padding: 30rpx 32rpx 20rpx;
	}

	.prop_box_content_location_r {
		flex: 1;
	}

	.address_icon {
		width: 34rpx;
		height: 34rpx;
		margin-right: 6rpx;
		margin-top: 4rpx;
	}

	.location_detail {
		font-size: 30rpx;
		color: #333333;
		margin-bottom: 18rpx;
	}

	.prop_time {
		width: 216rpx;
		height: 50rpx;
		border: 2rpx solid #CDCDCD;
		text-align: center;
		line-height: 46rpx;
		color: #333333;
		font-size: 30rpx;
		border-radius: 4rpx;
	}

	.available_items {
		font-size: 30rpx;
		color: #222222;
		margin: 40rpx 0 30rpx 32rpx;
	}

	.prop_list {
		height: 700rpx;
		padding: 0 32rpx 4rpx;
		border-radius: 20rpx;
	}

	.prop_list_box {
		background: #FFFFFF;
		/* box-shadow: 0 0 20rpx #E4E4E4; */
		border: 2rpx solid #E6E6E6;
		border-radius: 20rpx;
		display: flex;
		align-items: center;
		padding: 30rpx;
		border-radius: 20rpx;
		margin-bottom: 24rpx;
	}

	.prop_list_box_l {
		width: 184rpx;
		height: 190rpx;
		margin-right: 28rpx;
		border-radius: 8rpx;
	}

	.prop_list_box_r {
		flex: 1;
		height: 190rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.prop_list_box_r_title {
		font-size: 30rpx;
		color: #222222;
		font-weight: bold;
	}

	.reward {
		border: 2rpx solid #FF4820;
		border-radius: 4rpx;
		font-size: 22rpx;
		color: #FF4820;
		height: 36rpx;
		text-align: center;
		line-height: 30rpx;
		/* margin: 10rpx 0 16rpx; */
		width: fit-content;
		padding: 0 10rpx;
	}

	.prop_list_box_r_detail {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.prop_list_box_r_detail_price {
		font-size: 44rpx;
		font-weight: bold;
		color: #FF3A3A;
	}

	.prop_list_box_r_detail_button {
		width: 124rpx;
		height: 44rpx;
		background: linear-gradient(92.26deg, #FF7461 6.48%, #FF4219 98.53%);
		border-radius: 100rpx;
		color: #FFFFFF;
		font-size: 22rpx;
		text-align: center;
		line-height: 44rpx;
	}

	.prop_list_box_r_detail_button:active {
		opacity: 0.8;
	}
</style>
